<template>
    <div class="gallery-layout" v-show="open">
        <div class="img-list-pos">
            <div class="img-list">
                <div class="gallery-close-btn" @click.stop.prevent="$emit('close')">
                    <i class="fa fa-times fa-2x"></i>
                </div>
                <div class="img-list-box">
                    <template v-for="(path,i) in paths">
                        <div class="single-img-box" :key="i">
                            <ResizeImg :src="setPath(path)" thumb-size="xl"></ResizeImg>
                            <button type="button" class="btn btn-warning del-img-btn"  v-if="canEdit" @click.prevent="delImg(path)">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </template>
                    <div class="text-center" v-if="paths.length==0">无图片</div>
                </div>
            </div>
        </div>
    </div>
    
</template>
<script>
import ResizeImg from './ResizeImg.vue'

export default {
    name:'Gallery',
    components:{ResizeImg},
    data(){
        return {
            paths:[]
        }
    },
    props:{
        canEdit:{
            type:Boolean,
            default:false
        },
        files:{
            type:Array,
            default:function(){
                return []
            }
        },
        baseUrl:{
            type:String,
            default:''
        },
        open:{
            type:Boolean,
            default:false
        }
    },
    watch:{
        open(v,ov){
            var self = this;
            self.bindingKey(v);
            self.$root.GALLERY_OPENED = v;
        },
        files:{
            deep:true,
            handler(v,ov){
                var self = this;
                self.paths = v;
            }
        }
    },
    methods:{
        bindingKey(f){
            var self = this;
            if(f){
                document.body.addEventListener('keydown',keyEvent,false);
            } else {
                document.body.removeEventListener('keydown',keyEvent,false);
            }

            function keyEvent(e){
                
                if(e.keyCode==27){
                    if (window.event) {
                        e.returnValue = false;
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                    }
                    setTimeout(function(){
                        self.$emit('close');
                    },100);
                    
                }
            }
        },
        setPath(v){
            var self = this;
            if(v!=null&&v!=''&&v!='null'){
                return self.baseUrl + v;
            }
            return '';
        },
        delImg(path){
            var self = this;
            self.$emit('delimg',path);
        }
    },

    mounted(){
        var self = this;
        self.paths = self.files;
    }
}
</script>
<style scoped>
.gallery-layout{
    position: fixed;
    display: block;
    top: 0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    z-index: 10002;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s ease;
}

.gallery-layout .img-list-pos{
    position: absolute;
    width: 100%;
    height:100%;
    top:0px;
    left: 0px;
    right:0px;
    text-align: center;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.gallery-close-btn{
    position: absolute;
    cursor: pointer;
    right:-13px;
    top:-13px;
    color: #999;
    background-color: #fff;
    width: 27px;
    height: 27px;
    line-height: 27px;
    border-radius: 50%;
}

.gallery-layout .img-list{
    position: relative;
    background-color: #fff;
    max-width: 800px;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}

.gallery-layout .img-list-box{
    max-width: 720px;
    max-height: 570px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
}

.gallery-layout .single-img-box{
    display: inline-block;
    padding: 4px 55px 4px 4px;
    border: solid 1px #eee;
    margin: 3px;
    position: relative;
}

.gallery-layout .del-img-btn{
    transition: all 0.25s;
    position: absolute;
    bottom: 5px;
    right:5px;
}
</style>